<template>
  <div id="details">
    <div id="top">
      <p>{{DetailsData.product_name}}</p>
      <ul>
        <li>概述</li>
        <li>参数</li>
        <li>用户评价</li>
      </ul>
    </div>
    <div id="bottom">
      <div id="box">
        <div id="left">
          <el-carousel height="100%">
            <el-carousel-item v-for="item in image" :key="item.id">
              <img :src="'http://39.100.7.70:81/'+ item.product_picture" alt />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div id="right">
          <div>
            <div id="tops">
              <p>{{DetailsData.product_name}}</p>
              <p>{{DetailsData.product_intro}}</p>
              <p>小米自营</p>
              <p>
                <span>{{DetailsData.product_price}}元</span>
                <s>{{DetailsData.product_selling_price}}元</s>
              </p>
            </div>
            <div id="cent">
              <div>
                <ul class="top">
                  <li>{{DetailsData.product_name}}</li>
                  <li>
                    <span>{{DetailsData.product_price}}元</span>
                    <s>{{DetailsData.product_selling_price}}元</s>
                  </li>
                </ul>
                <div class="bottom">总计:{{DetailsData.product_price}}元</div>
              </div>
            </div>
            <div id="bottoms">
              <ul class="buttoms">
                <button @click="addShoppingCart()" :disabled="disable">加入购物车</button>
                <button @click="addCollect()">喜欢</button>
              </ul>
              <ul class="title">
                <li>
                  <i class="el-icon-circle-check"></i>小米自营
                </li>
                <li>
                  <i class="el-icon-circle-check"></i>小米发货
                </li>
                <li>
                  <i class="el-icon-circle-check"></i>七天无理由退货
                </li>
                <li>
                  <i class="el-icon-circle-check"></i>七天价格保护
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/Home.js";
import Appi from "@/api/Shopping.js";
import ApiCcollect from "@/api/Collect.js";
import { mapState, mapActions, mapMutations } from "vuex";
import { Notification } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      disable: false,
      DetailsData: [],
      image: [] //详情页数据
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapActions(["unshiftAddShop", "unshifNumberAdd", "shoppingCartDatas"]),
    async getDetailss() {
      let { data: res } = await Api.getDetailss({
        productID: this.$route.query.id
      });
      // console.log(res);
      this.image = res.ProductPicture;
      // console.log(this.image);
    },
    //用户的购物车数据及其信息 === api请求数据
    async getShoppingCart() {
      //请求用户购物车消息
      let { data: res } = await Appi.getShoppingCart({
        user_id: this.$store.state.user_id
      });
      this.shoppingCartDatas(res.shoppingCartData);
      // this.$store.state.shoppingCartData = res.shoppingCartData;
      // console.log(this.$store.state.shoppingCartData);
    },
    //  将商品加入购物车
    async addShoppingCart() {
      //检测是否用户是否登录
      if (JSON.stringify(this.userLoginMsg) == "{}") {
        this.$store.state.loginDialog = true;
      } else {
        let res = await Appi.addShoppingCart({
          user_id: this.$store.state.user_id,
          product_id: this.DetailsData.product_id
        });
        console.log(res);
        switch (res.data.code) {
          case "001": {
            // 新加入购物车成功
            this.unshiftAddShop(res.data.shoppingCartData[0]);
            Notification.success({ title: "成功", message: "添加商品成功" });
            break;
          }
          case "002": {
            this.unshifNumberAdd(this.DetailsData.product_id); //如果该商品已经被添加一次了就在原有基础上数量加一
            Notification.success({ title: "成功", message: res.data.msg });
            break;
          }
          case "003": {
            this.disable = true;
            Notification.error({ title: "错误", message: res.data.msg });
          }
        }
      }
    },
    //addCollect收藏
    async addCollect() {
      // 判断是否登录,
      if (JSON.stringify(this.userLoginMsg) == "{}") {
        this.$store.state.loginDialog = true;
      }
      let { data: res } = await ApiCcollect.getAddCollect({
        user_id: this.$store.state.user_id,
        product_id: this.DetailsData.product_id
      });
      console.log(res);
      if (res.code == "001") {
        Notification.success({ title: "收藏", message: "收藏成功" });
      } else {
        // 添加收藏失败
        Notification.error(res.msg);
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.getDetailss();
    this.addCollect();
    this.getShoppingCart();
    let { data: res } = await Api.getDetails();
    console.log(res);
    res.Product.forEach(item => {
      if (item.product_id == this.$route.query.id) {
        console.log(item.product_id);

        this.DetailsData = item;
        console.log(this.DetailsData);
      }
    });
  },
  computed: {
    //引进了vuex中购物车数据
    ...mapState(["shoppingCartData", "loginDialog", "userLoginMsg"])
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
#details {
  width: 100%;
  display: flex;
  flex-direction: column;
  #top {
    width: 100%;
    height: 76px;
    display: flex;
    justify-content: space-between;
    box-shadow: #e0e0e0 10px 10px 10px;
    padding: 0 200px;
    p {
      width: 100%;
      height: 100%;
      font-size: 20px;
      line-height: 76px;
    }
    ul {
      width: 204px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        font-size: 16px;
        color: #616161;
        &:hover {
          color: #ff6700;
        }
      }
    }
  }
  #bottom {
    width: 100%;
    height: 720px;
    padding: 42px 200px 20px;
    #box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      #left {
        width: 40%;
        height: 656px;
        margin-right: 40px;
        .el-carousel,
        .el-carousel-item,
        img {
          width: 100%;
          height: 100%;
        }
      }
      #right {
        flex: 1;
        padding-bottom: 24px;
        div {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          #tops {
            width: 100%;
            height: 230px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 30px;
            p {
              &:nth-of-type(1) {
                font-size: 26px;
              }
              &:nth-of-type(2) {
                font-size: 13px;
                color: #b0b0b0;
              }
              &:nth-of-type(3) {
                font-size: 20px;
                color: #ff6700;
              }
              &:nth-of-type(4) {
                span {
                  font-size: 18px;
                  color: #ff6700;
                  margin-right: 10px;
                }
                s {
                  font-size: 14px;
                  color: #b0b0b0;
                }
              }
            }
          }
          #cent {
            width: 100%;
            height: 174px;
            background: #f9f9fa;
            padding: 42px 72px;
            div {
              width: 100%;
              height: 100%;
              //   border: 1px solid #000;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                li {
                  color: #616161;
                  &:nth-of-type(1) {
                    font-size: 20px;
                  }
                  &:nth-of-type(2) {
                    font-size: 17px;
                    s {
                      margin-left: 10px;
                    }
                  }
                }
              }
              .bottom {
                color: red;
                font-size: 29px;
                line-height: 80px;
              }
            }
          }
          #bottoms {
            width: 100%;
            height: 124px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .buttoms {
              width: 100%;
              height: 70px;
              display: flex;
              justify-content: space-between;
              button {
                &:nth-of-type(1) {
                  width: 330px;
                  height: 100%;
                  background: #ff6700;
                  text-align: center;
                  line-height: 70px;
                  color: white;
                  border-radius: 6px;
                  &:hover {
                    background: #f25807;
                  }
                }
                &:nth-of-type(2) {
                  width: 260px;
                  height: 100%;
                  background: #b0b0b0;
                  color: white;
                  text-align: center;
                  line-height: 70px;
                  border-radius: 6px;
                  &:hover {
                    background: #757575;
                  }
                }
              }
            }
            .title {
              width: 100%;
              display: flex;
              padding-right: 140px;
              justify-content: space-between;
              li {
                font-size: 18px;
                color: #b0b0b0;
              }
            }
          }
        }
      }
    }
  }
}
</style>